<template>
  <div class="shared-surprise">
    <BackNavigation v-bind:title-info="titleInfo"/>
    <div v-if="sharedInfo" class="img-container">
      <img v-bind:src="sharedInfo.img" alt="分享有礼">
    </div>
    <div class="input-container">
      <input v-if="false" type="button" value="点击分享拆红包" @click="sharedClick">
    </div>
    <div v-if="sharedInfo" class="p-container">
      <p class="list-title">活动规则</p>
      <p class="text-title">{{ sharedInfo.condition.title }}</p>
      <p v-for="detail in sharedInfo.condition.details">{{ detail }}</p>
      <p class="text-title">{{ sharedInfo.reward.title }}</p>
      <p v-for="detail in sharedInfo.reward.details">{{ detail }}</p>
      <p class="text-title">{{ sharedInfo.statement.title }}</p>
      <p v-for="detail in sharedInfo.statement.details">{{ detail }}</p>
    </div>
  </div>
</template>

<script>
  import * as recommend from 'api/recommend'
  import { get_cookie } from 'assets/cookie/cookie'
  import BackNavigation from '../mine/navigation.vue'

  export default {
    name: 'shared-surprise',
    components: {
      BackNavigation
    },
    data () {
      return {
        titleInfo: {
          leftTitle: '返回',
          title: '分享有礼',
          rightTitle: ''
        },
        sharedInfo: undefined
      }
    },
    methods: {
      sharedClick () {
//        let url = window.location.href
//        let url = 'https://apptest.mingpinjiancai.com/index.php/share/regist'
//        let title = '铭材标题'
//        let desc = '铭材详情说明'
//        let iconUrl = 'https://m.mingpinjiancai.com/images/20170822172941.png'
//        console.log('url----')
//        console.log(url)
//        return false
//        this.$wxShared(url, title, desc, iconUrl)
//        console.log(this.sharedInfo.share)
//        this.$wxShared(this.sharedInfo.share.url, this.sharedInfo.share.title, this.sharedInfo.share.details,
//          this.sharedInfo.share.icon)
      }
    },
    created () {
      recommend.getSharedInfo().then(resault => {
        if (resault.status === 200 && resault.data.data !== null) {
          console.log(resault.data.data)
          this.sharedInfo = resault.data.data
        } else {
          alert(resault.data)
        }
      }).catch(resault => {
        console.log(resault)
      })
    }
  }
</script>

<style lang="scss">
  div.shared-surprise {
    position: relative;
    margin-top: 44px;
    width: 100%;
    height: auto;

    >div.img-container {
      overflow: hidden;
      width: 100%;
      height: auto;

      >img {
        overflow: hidden;
        width: 100%;
        height: auto;
      }
    }

    >div.input-container {
      margin: 10px 0 0 0;
      overflow: hidden;
      width: 100%;
      height: auto;

      >input {
        width: 50%;
        height: 44px;
        background-image: url('../../assets/img/common/shared_surprise_background_icon.png');
        outline: none;
        font-size: 14px;
        border-radius: 5px;
        -webkit-appearance: none;
        border: 0 solid rgb(66, 66, 66);
        background-size:100% 100%;
        background-color: transparent;
        font-weight: bold;
      }
    }

    >div.p-container {
      overflow: hidden;
      padding: 10px 15px;
      width: 100%;
      height: auto;

      >p {
        margin: 10px 0 10px 0;
        padding: 0 15px;
        color: rgb(66, 66, 66);
        text-align: left;
        font-size: 12px;
      }

      >p.list-title {
        font-size: 14px;
        text-align: center;
        font-weight: bold;
      }

      >p.text-title {
        padding: 0;
        text-align: left;
        font-size: 14px;
      }
    }
  }
</style>
